<template>
	<view class="cart">
		<view class="cartList">
			<view class="cartList-item" v-for="(item, index) in list" :key="index">
				<view class="checkbox">
					<u-checkbox @change="checkboxChange(index)" size='40' v-model="item.is_checked" shape="circle">
					</u-checkbox>
				</view>
				<view class="center">
					<u-image height="80px" :src="item.goods.cover_url" mode="heightFix"></u-image>
				</view>
				<view class="right">
					<view class="title">
						{{item.goods.title}}
					</view>
					<view class="description">
						{{item.goods.description}}
					</view>
					<view class="foot">
						<view class="price">
							￥{{item.goods.price}}
						</view>
						<view>
							<u-number-box v-model="item.num" @change="valChange(item.id,item.num)" :min='1'>
							</u-number-box>
							<u-icon name="trash" class="u-m-l-10" @click="deleteShop(item.id)"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="bottom">
				<view>
					<u-checkbox shape="circle" v-model="isAllSelect" @change="allSelect">全选</u-checkbox>
				</view>
				<view class="right">
					<view class="total">
						合计：<text>￥{{totalMoney}}</text>
					</view>
					<u-button shape="circle" type='primary'  @click="settle" :disabled='disabled'>去结算</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		CartList,
		checked
	} from '../../common/http.api.js'
	export default {
		data() {
			return {
				list: [],
				isAllSelect: false,
				disabled:true
			}
		},
		computed:{
			totalMoney(){
				let total=0;
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].is_checked){
						console.log(this.list[i].goods)
						total+=this.list[i].goods.price*this.list[i].num;
					}
				}
				return total.toFixed(2)
			}
		},

		methods: {
			// 结算
			settle(){
				uni.navigateTo({
					url:'/pages/cart/orderPreview'
				})
			},
			// 单选
			async checkboxChange(index) {
				this.list[index].is_checked=!this.list[index].is_checked;
				let arr=[];
				for(let i=0;i<this.list.length;i++){
					if(!this.list[i].is_checked){
						this.isAllSelect=false
						break;
					}
					this.isAllSelect=true;	
				}
				for(let i=0;i<this.list.length;i++){
					if(this.list[i].is_checked){
						arr.push(this.list[i].id)
					}
				}
				if(this.totalMoney==0){
					this.disabled=true;
				}else{
					this.disabled=false
				}
				const params={
					cart_ids:arr
				}
				const res=await this.$u.api.checked(params);
			},
			// 改变购物车数量
			async valChange(id, num) {
				const url = '/api/carts/' + id;
				const params = {
					num
				}
				const res = await this.$u.patch(url, params);
			},
			// 删除购物车
			async deleteShop(id) {
				console.log(id)
				const url = '/api/carts/' + id;
				const res = await this.$u.delete(url);
				this.getCartList()
			},
			// 获取购物车列表
			async getCartList() {
				const res = await this.$u.api.CartList();
				res.data.data.forEach(item => {
					if (item.is_checked) {
						item.is_checked = true
					} else {
						item.is_checked = false;
					}
				})
				for(let i=0;i<res.data.data.length;i++){
					if(!res.data.data[i].is_checked){
						this.isAllSelect=false;
						break;
					}
					this.isAllSelect=true			
				}
				this.list = res.data.data;
				console.log(this.totalMoney)
				if(this.totalMoney==0){
					console.log(111)
					 this.disabled=true
					 return;
				}
				this.disabled=false
			},
			// 全选
			async allSelect() {
				this.isAllSelect = !this.isAllSelect;
				let arr=[]
				this.list.forEach(item => {
					if (this.isAllSelect) {
						item.is_checked = true;
						arr.push(item.id);
						this.disabled=false
					} else {
						item.is_checked = false
						this.disabled=true
					}
				})
				const params={
					cart_ids:arr
				}
				const res=await this.$u.api.checked(params);
				console.log(res)
			}

		},
		async onShow() {
			this.getCartList()
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		.cartList {
			padding-bottom: 50px;
			&-item {
				display: flex;
				height: 100px;
				align-items: center;
				padding: 15px;
				.checkbox {
					width: 50px;
				}
				.center {
					margin-right: 10px;
				}
				.right {
					flex: 1;

					.title {
						font-size: 14px;
						font-weight: bold;
					}
					.description {
						margin-bottom: 20px;
						color: #C0C0C0;
						font-size: 12px;
					}
					.foot {
						display: flex;
						justify-content: space-between;
						.price {
							color: red;
							font-size: 16px;
							font-weight: bold;
						}
					}
				}
			}
			.bottom {
				height: 50px;
				position: fixed;
				//#ifdef H5
				bottom:50px;
				// #endif
				//#ifndef H5
				bottom: 0px;
				// #endif
				
				background-color: #FFFFFF;
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 15px;
				align-items: center;
				.right {
					display: flex;
					align-items: center;
					.total {
						margin-right: 10px;

						text {
							color: red;
							font-size: 16px;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
